<template>
    <view class="swiper_box">
        <swiper class="swiper" :interval="2200" :duration="5000" autoplay circular :display-multiple-items="4">
            <swiper-item class="swiper-item" v-for="item in list" :key="item.id">
                <image :src="item.img[0].path2" mode="widthFix" />
            </swiper-item>
        </swiper>
    </view>
</template>

<script lang="ts" setup>
import { http } from '@/utils/http'
const list = ref([])
http.get('/Article/MainBusiness/List', { state: '开启' }).then((res: any) => {
    if (res.code === 2000) {
        list.value = res.data
    }
})
</script>

<style scoped>
.swiper_box {
    padding: 12rpx;
    margin-bottom: 20rpx;
    background: white;
    border-radius: 12rpx;
}

.swiper {
    width: 100%;
    height: 170rpx;
    overflow: hidden;
    border-radius: 12rpx;
}

.swiper-item {
    padding: 0 6rpx;
}

.swiper-item image {
    width: 100%;
}
</style>
